<template>
  <div class="introPage">
    <div class="outBox">
      <div class="top">
        <div class="swiper-pagination" slot="pagination"></div>
      </div>
      <div class="swBox">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- slides -->
          <swiper-slide><img style="width: 100%;height: 424px;" src="../../assets/images/img1.jpg" alt="">
          </swiper-slide>
          <swiper-slide><img style="width: 100%;height: 424px;" src="../../assets/images/img2.jpg" alt="">
          </swiper-slide>
          <swiper-slide><img style="width: 100%;height: 424px;" src="../../assets/images/img3.jpg" alt="">
          </swiper-slide>
          <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
          <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <div class="introC" @mouseleave="isHidden()">
      <img src="../../assets/images/introbg.jpg" style="width: 100%" alt="">
      <ul>
        <li @mouseover="isShow(index)" v-for="(item,index) in this.introCdata">{{item.name}}</li>
      </ul>
      <div class="zzc" v-show="this.iszzc">
        <p>{{this.zzcIndex}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  export default {
    name: "introduction",
    data() {
      return {
        zzcIndex: '',
        iszzc: false,
        introCdata: [
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'},
          {name: '电影色彩系统'}
        ],
        swiperOption: {
          direction: 'horizontal',
          navigation: {
            nextEl: '.swiper-button-prev',
            prevEl: '.swiper-button-next',
          },
          loop: true,
          effect: 'fade',
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            bulletClass: 'my-bullet',
            renderBullet: function (index, className) {
              let text;
              switch (index) {
                case 0:
                  text = '飞行器';
                  break;
                case 1:
                  text = '影像系统';
                  break;
                case 2:
                  text = '遥控系统';
                  break;
              }
              return '<span class="' + className + '">' + text + '</span>';
            }
          }
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    mounted() {
      var self = this;
      for (var i = 0; i < self.$refs.mySwiper.swiper.pagination.bullets.length; i++) {
        console.log(self.$refs.mySwiper.swiper)
        console.log(this.$refs.mySwiper.swiper)
        self.$refs.mySwiper.swiper.pagination.bullets[i].onmouseover = (function (num) {
          return function () {
            self.$refs.mySwiper.swiper.slideTo(num + 1);
          }
        })(i)
      }
    },
    methods: {
      isShow(data) {
        this.iszzc = true;
        this.zzcIndex = data;
      },
      isHidden() {
        this.iszzc = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .introPage {
    .outBox {
      background: #75a420;
      height: 555px;
      .top {
        width: 100%;
        height: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .swBox {
        width: 1200px;
        margin: 0 auto;
      }
      .my-bullet {
        margin: 0 50px;
        cursor: pointer;
        font-size: 20px;
        outline:0 none !important;
      }
      .swiper-pagination-bullet-active {
        background: #75a420;
        color: #007aff;
        padding-bottom: 4px;
        border-bottom: 2px solid #007aff;
      }
    }
    .introC {
      width: 100%;
      height: 100%;
      position: relative;
      > ul {
        width: 1170px;
        margin: 0 auto;
        display: flex;
        flex-flow: wrap;
        li {
          width: 190px;
          background: red;
          text-align: center;
          line-height: 56px;
          border: 1px solid black;
          cursor: pointer;
        }
      }
      .zzc {
        width: 100%;
        height: 594px;
        background: #666666;
        opacity: .5;
        position: absolute;
        top: 0;
        p {
          text-align: center;
          padding-top: 300px;
          font-size: 230px;
        }
      }
    }
  }

</style>
